<template>
  <div class="equipmentAdd">
    <el-dialog
      :title="pid?'编辑':'新增'"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"

      >
      <div style="max-width:1000px;margin:auto;">
    <h4>验收信息</h4>
    <table border="1" rules="all" class="table">
      <tr>
        <td>标题</td>
        <td colspan="3">
          <el-input v-model="addForm.acceptTitle" placeholder="请输入标题"></el-input>
        </td>
      </tr>
      <tr>
        <td>验收人</td>
        <td>
          <span class="content">{{applyUser}}</span>
        </td>
        <td>验收时间</td>
        <td>
          <el-date-picker
            style="width: 100%"
            v-model="addForm.acceptDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <!-- <td>验收类别</td>
        <td>
          <el-select style="width: 100%" clearable v-model="addForm.acceptTypeId" placeholder="请选择">
            <el-option
              v-for="item in deviceAcceptTypeList"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </td> -->
        <td>采购计划单</td>
        <td @click="cgjhBtn" colspan="3">
          <span  class="content" v-if="qzsdData&&qzsdData.planCode"> {{qzsdData.title}}({{qzsdData.planCode}})</span>
        </td>

      </tr>
<!--      <tr>-->
<!--        <td>采购申请</td>-->
<!--        <td colspan="3">-->
<!--          <span class="content"></span>-->
<!--        </td>-->
<!--      </tr>-->
      <tr>
        <td>说明</td>
        <td colspan="3">
          <el-input
            type="textarea"
            autosize
            :autosize="{ minRows: 2, maxRows: 2}"
            placeholder="请输入内容"
            v-model="addForm.remark">
          </el-input>
        </td>
      </tr>
    </table>


    <h4>产品信息</h4>
    <!-- <div style="margin-left: 15px;margin-bottom: 15px">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
    </div> -->
    <el-table :data="procureDevices" border>
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column label="名称" property="deviceName"/>
      <el-table-column label="规格型号" property="deviceModel"/>
      <el-table-column label="数量" property="anticipatedProcureNum"/>
      <!-- <el-table-column label="预计单价" property="anticipatedProcurePrice"/> -->
      <!-- <el-table-column label="品牌" property="deviceBrand" width="150"/> -->
      <el-table-column label="单位" property="deviceUnitName"/>
      <!-- <el-table-column label="生产厂家" property="supplier"/> -->
      <el-table-column label="需要程度" property="degreeNeed"/>
      <el-table-column label="用途" property="purpose"/>
      <el-table-column label="使用单位" property="recipientsDeptName" width="150px"/>
      <el-table-column label="设备分类" property="deviceTypeName" width="150px"/>
      <el-table-column label="备注" property="remark"/>
      <!-- <el-table-column label="操作" align="left" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.acceptance==1" size="mini" type="primary" icon="el-icon-edit">修改</el-button>
          <el-button v-if="scope.row.acceptance==2" size="mini" type="success" icon="el-icon-edit">审核</el-button>
        <el-button v-show="scope.row.acceptance==1" size="mini" type="info" icon="el-icon-view" >查 看</el-button>

        </template>
      </el-table-column> -->
      <!-- <el-table-column label="小计" prop="anticipatedSubtotal"/> -->
    </el-table>
    <!-- <el-table :data="addForm.deviceAcceptDetailList" stripe style="margin-left: 15px;width: 90%"
              @selection-change="handleSelectionChange"
              border>
      <el-table-column align="center" type="selection" width="80"></el-table-column>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="设备编号" property="deviceCode" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.deviceCode" placeholder=""></el-input>
        </template>

      </el-table-column>
      <el-table-column align="center" label="资产编号" property="assetsCode" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.assetsCode" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" property="deviceName" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.deviceName" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电子标签码"  property="electronicLabel" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.electronicLabel" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单位" property="deviceUnitId" width="200">
        <template slot-scope="scope">
          <el-select v-model="scope.row.deviceUnitId" placeholder="请选择" >
            <el-option v-for="item in deviceUnitsList" :key="item.dictCode" :label="item.dictLabel"
                       :value="item.dictCode"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="出厂编号" width="150" property="factoryCode" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-model="scope.row.factoryCode" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column label="类别" property="deviceTypeId" align="center" width="200">
        <template slot-scope="scope">
          <treeSelect v-show="true" :leibie='scope.$index' @deviceType="deviceTypeChange" type="deviceType"></treeSelect>
        </template>
      </el-table-column>
      <el-table-column align="center" label="品牌" width="130" property="deviceBrandId">
        <template slot-scope="scope">
          <el-select v-model="scope.row.deviceBrandId" placeholder="请选择" >
            <el-option
              v-for="item in optionspinpai"
              :key="item.id"
              :label="item.brandName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column align="center" label="规格型号" property="deviceModel" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.deviceModel" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="存放位置" property="repositoryId" width="200">
        <template slot-scope="scope">
          <treeSelect  :leibie='scope.$index' @deviceRepo="deviceTypecfwz" type="deviceRepo"></treeSelect>
        </template>
      </el-table-column>
      <el-table-column align="center" label="生产厂家" property="supplierId" width="150">
        <template slot-scope="scope">
          <el-select v-model="scope.row.supplierId" placeholder="请选择" >
            <el-option
              v-for="item in optionsgongys"
              :key="item.id"
              :label="item.supplierName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="购置日期" property="buyDate" width="180">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.buyDate"
            type="date"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" label="购置金额" property="buyMoney" width="150">
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.buyMoney" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="下一步" property="nextStepAcceptTypeId" width="150">
        <template slot-scope="scope">
          <el-select v-model="scope.row.nextStepAcceptTypeId" placeholder="请选择" >
            <el-option
              v-for="item in optionsxiayibu"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备状态" property="deviceStatusId" width="150">
        <template slot-scope="scope">
          <el-select v-model="scope.row.deviceStatusId" placeholder="请选择" >
            <el-option
              v-for="item in optionssbzt"
              :key="item.id"
              :label="item.statusName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="验收结果" property="checkResult" width="150">
        <template slot-scope="scope">
          <el-select v-model="scope.row.checkResult" placeholder="请选择" >
            <el-option
              v-for="item in optionysjg"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="验收说明" property="checkExplain" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.checkExplain" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table> -->
    <div class="upload">
      <el-upload
        :show-file-list="false"
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess">
        <el-button size="small" type="warning" icon="el-icon-folder-add">相关附件</el-button>
      </el-upload>
      <el-table  style="width: 900px" :data="addForm.annexFileList"  border>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="附件"  prop="">
          <template slot-scope="scope">
              {{scope.row.fileName}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" >
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="blue el-icon-delete" @click="fileDel(scope.$index,scope.row.filePath)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div style="text-align: center;margin-top: 50px;width: 90%">
      <el-button type="success" icon="el-icon-plus" size="mini" @click="tijiao" >提交</el-button>
    </div>
      </div>
    </el-dialog>

    <!--    前置验收单-->
    <qzsd-Dialog v-if="qzsdShow" :qzsdData="qzsdData" @qzysdBack="qzysdBack"></qzsd-Dialog>
    <!--    采购申请单-->
    <cgsqd-Dialog v-if="cgsqdShow" :qzsdData="cgsqdData" @qzysdBack="cgsqdBack"></cgsqd-Dialog>
    <!--添加产品弹框-->
    <tjcp-Dialog v-if="tjcpShow" :qzsdData="tjcpData" @qzysdBack="tjcpBack"></tjcp-Dialog>


  </div>
</template>

<script>
  import treeSelect from '@/views/equipmentGL/equipmentTZ/treeSelect'
  import Cookies from 'js-cookie'
  import request from '@/utils/request'
  import { deviceAcceptType,procurePlanDetail,deviceAcceptDetail} from '@/api/purchase/index'
  import { deviceUnits,fileDelete,  fileDeleteLibrary } from '@/api/basicInformation/index'

  //选择前置验收单
  import qzsdDialog from './qzsdDialog'
  import cgsqdDialog from './cgsqdDialog'
  import tjcpDialog from './tjcpDialog'

  export default {
    name: 'equipmentAdd',
    props:['pid'],
    components: {
      qzsdDialog,
      cgsqdDialog,
      tjcpDialog,
      treeSelect
    },
    data() {
      return {
        centerDialogVisible:true,
        leibielist:[],//类别数据
        cfwzlist:[],//存放位置
        deviceAcceptTypeList:[],
        applyUser: Cookies.get('username'),
        addForm: {
          acceptTitle: '',
          acceptDate: '',
          acceptTypeId:'',
          purchasePlanId:'',
          annexFileList:[],
          procureDevices:[],//设备信息list


        },
        procureDevices:[],
        deviceUnitsList:[],//单位
        qzsdData: {},//前置验收单数据
        qzsdShow: false,//前置验收单弹框



        tjcpData: {},//添加产品数据
        tjcpShow: false,//添加产品
        cgsqdData: {},//采购申请单数据
        cgsqdShow: false,//采购申请单弹框

        tableDataxunz: '',
        dialogVisible: false,
        fileList: [],
        optionsleixing: [
          { value: '1', label: '设备采购' },
          { value: '2', label: '备件消耗材料采购' }
        ],//类型数据
        optionscgzq: [//采购周期
          { value: '1', label: '年' },
          { value: '2', label: '季' },
          { value: '3', label: '月' }
        ],
        //验收结果
        optionysjg: [
          { value: '1', label: '合格' },
          { value: '2', label: '不合格' }
        ],
        //设备状态
        optionssbzt: [],
        //品牌数据
        optionspinpai: [ ],
        //下一步
        optionsxiayibu: [ ],
        //生产厂家
        optionsgongys: [],
        //单位数据
        optionsdanwei: [
          { value: '1', label: '支' },
          { value: '2', label: '桶' },
          { value: '3', label: '箱' },
          { value: '4', label: '把' },
          { value: '5', label: '克' },
          { value: '6', label: '卷' }
        ],
        //总数居

        //采购信息
        caigouxinxi: {
          acceptTitle: '',//标题
          ghsj: '',//供货时间
          cgjh: '',//采购计划
          gouzhiliyou: '',//购置理由
          beizhu: ''//备注
        },
        tableDatajihuaXZ: []//选中的数据
      }
    },

    created() {
      this.getPinpai()
      this.getGys()
      this.getSbzt()
      this.getDeviceUnits()
      this.getDeviceAcceptType()
      this.getleibie()
      this.getcfwz()
      this.getxyb()
      if(this.pid){
        this.getData()
      }
    },
    methods: {
      async getData(){
        let res = await deviceAcceptDetail(this.pid)
        this.addForm=res.data
        this.procureDevices=this.addForm.procureDevices
        this.addForm.procureDevices=[]
        this.qzsdData={planCode:this.addForm.planCode}
      },
      close(){
        this.$emit('subSetChane')
      },
      //获取下一步数据
      getxyb:function(){
        request({
          url: '/device/acceptTypeApi/list',
          method: 'get',
        }).then(response => {
          this.optionsxiayibu = response.data
        });

      },
      //获取存放
      getcfwz:function(){
        request({
          url: '/device/deviceRepo/list',
          method: 'get',
        }).then(response => {
          this.cfwzlist = response.rows
        });
      },
      // 获取类别数据
      getleibie:function(){
        request({
          url: '/device/deviceType/list',
          method: 'get',
        }).then(response => {

          this.leibielist = response.rows
        });
      },
      //获取设备状态
      getSbzt:function(){
        request({
          url: '/device-status-api',
          method: 'get',
        }).then(response => {

          this.optionssbzt = response.rows
        });
      },
      //获取生产厂家数据
      getGys:function(){
        request({
          url: '/device/DeviceSupplier/list',
          method: 'get',
        }).then(response => {

          this.optionsgongys = response.rows
        });
      },
      //获取品牌数据
      getPinpai:function(){
        request({
          url: '/device-brands-api/list',
          method: 'get',
        }).then(response => {

          this.optionspinpai = response.rows
        });
      },
      /** 获取设备类别的值*/
      deviceTypeChange(data) {

        this.addForm.deviceAcceptDetailList[data.num].deviceTypeId =data.id
      },
      //存放位置回调
      deviceTypecfwz:function(data){

        this.addForm.deviceAcceptDetailList[data.num].repositoryId =data.id
      },
      /** 验收类别**/
      async getDeviceAcceptType() {
        let res = await deviceAcceptType()
        this.deviceAcceptTypeList = res.data
      },
      /** 选择前置验收单**/
      async qzysdBack(val) {
        this.qzsdShow = false
        if(val){
          this.qzsdData=val
          this.addForm.purchasePlanId = val.id
          //device/procureDevice/id
          request({
            url:`/device/procureDevice/${val.id}`,
            method:'get'
          }).then((res)=>{
            this.procureDevices=res.data

            for(let i=0;i<this.procureDevices.length;i++){
              this.addForm.procureDevices[i]={deviceName:this.procureDevices[i].deviceName}
            }
          })
          // let res = await procurePlanDetail(this.addForm.purchasePlanId)
          // this.deviceAcceptDetailList=res.data.procureDevices

        }
      },
      /** 获取设备单位*/
      getDeviceUnits() {
        request({
          url: '/system/dict/data/deviceUnits',
          method: 'get',
        }).then(response => {
          this.deviceUnitsList = response.data
        });
      },
      /** 文件上传**/
      fileSuccess(res) {
        this.addForm.annexFileList.push({ fileName: res.fileName, filePath: res.filePath, typeDistinguish: 1 })
      },
      /** 文件删除**/
      async fileDel(index, filePath) {
        for (let i = 0; i < this.addForm.annexFileList.length; i++) {
          if (index == i) {
            if (this.addForm.annexFileList[i].id) {
              await fileDeleteLibrary(this.addForm.annexFileList[i].id)
            } else {
              await fileDelete(filePath)
            }
            this.addForm.annexFileList.splice(i, 1)
          }
        }
      },


      //选择
      choose() {
        this.tjcpShow = true
      },



      //采购申请
      cgsqBtn: function() {
        if (this.addForm.caigoujihua) {
          return
        }
        var pp = {
          id: '123456'
        }
        this.cgsqdData = pp
        this.cgsqdShow = true
      },
      //采购申请弹框回调函数
      cgsqdBack: function(msg) {
        this.cgsqdShow = false
        if (msg) {
          this.addForm.caigouSQ = msg.name + '(' + msg.code + ')'
          console.log('返回数据', msg)
        } else {
          this.addForm.caigouSQ = ''
        }

      },
      cgjhBtn: function() {
        if (this.addForm.caigouSQ) {
          return
        }
        console.log('采购计划')
        // var pp = {
        //   id: '123456'
        // }
        // this.qzsdData = pp
        this.qzsdShow = true
      },
      //计划单弹框回调函数

      //弹框关闭回调函数
      callback: function(msg) {
        this.addshow = false
        console.log('返回数据', msg)
      },

      //附件删除
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3)
      },
      //表格复选框监听
      handleSelectionChange: function(row) {
        this.tableDatajihuaXZ = row
        console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)

      },

      //添加
      add: function() {
        console.log('添加')

        var indexSun = this.addForm.deviceAcceptDetailList.length
        this.addForm.deviceAcceptDetailList.push(
          {
            index: indexSun,
            deviceCode:'',
            assetsCode:'',
            deviceName:'',
            electronicLabel:'',
            deviceUnitId:'',
            factoryCode :'',
            deviceTypeId :'',
            deviceBrandId :'',
            deviceModel:'',
            repositoryId :'',
            supplierId:'',
            buyDate :'',
            buyMoney :'',
            nextStepAcceptTypeId:'',
            deviceStatusId:'',
            checkResult:'',
            checkExplain:'',
          }
        )
      },

      //删除
      deleteBtn: function() {
        for (var i = 0; i < this.addForm.deviceAcceptDetailList.length; i++) {
          for (var j = 0; j < this.tableDatajihuaXZ.length; j++) {
            if (this.addForm.deviceAcceptDetailList[i].index == this.tableDatajihuaXZ[j].index) {//相等
              this.addForm.deviceAcceptDetailList.splice(i, 1)
            }

          }
        }
        console.log(' this.tableDatajihua', this.addForm.deviceAcceptDetailList)
        this.fuzhiIndex()
      },
      //重新赋值index
      fuzhiIndex: function() {
        for (var i = 0; i < this.addForm.deviceAcceptDetailList.length; i++) {
          this.addForm.deviceAcceptDetailList[i].index = i
        }
      },

      //添加产品弹框回调
      tjcpBack: function(msg) {
        this.tjcpShow = false
        console.log('返回数据', msg)

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      tijiao: function() {

        let method=this.pid?'put':'post'
        request({
          url: '/device/deviceAccept',
          method: method,
          data:this.addForm,
        }).then(response => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          // this.$router.push('/purchaseGL/equipmentGL')
          this.$emit('subSetChane',1)
        });



      }

    }
  }
</script>
<style lang="scss">
  .equipmentAdd {
    margin-left: 20px;
    .dialog .el-dialog__body{
      height: 85vh;
      overflow: scroll;
    }
    h4 {
      color: #05A380;
    }
    .upload {
      margin-top: 20px;
      .el-table{
        margin-top:20px;
      }
    }
    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;

      tr {
        .el-input--medium .el-input__inner, .el-textarea .el-textarea__inner {
          border: none;
        }

        td:nth-child(2n-1) {
          width: 180px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 320px;
        }
        td {
          line-height: 35px;
        }
        .content{
          padding-left: 15px;
        }
      }
    }
  }

  .shenqing {
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }

  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }

  .shen .borderNone .el-input--medium .el-input__inner {
    border: none;
  }

  .leixing .el-select {
    width: 100%;
  }

  .caigoustyle {
    width: 100%;

  }

  .shen .beizhu .el-textarea__inner {
    border: none;
  }

  .chuanpin {

  }


</style>
